<template>
	<view class="container">
		<view class="content" v-if="hasNoNotify">
			<image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">津膜MES</text>
			</view>
		</view>
		<uni-segmented-control
			v-if="!hasNoNotify"
			ref="segmentedControl"
			:current="current"
			:values="items"
			@clickItem="onClickItem"
			styleType="button"
			style="margin: 10px;"
		></uni-segmented-control>
		<!-- <scroll-view
			style="height: 80vh;"
			scroll-y="true"
			@scrolltolower="onScrollToLower"
		> -->
		<view  style="height: 80vh; overflow-y: auto;">
			<view v-show="current === 0">
				<uni-group v-for="(item, id) in MyUnreadNotify"  :key="id"
					:title="item.templateParams.name" mode="card">
					<view @click="dialogToggle('unread', item.id)">
						{{ item.templateParams.what }}
					</view>
				</uni-group>
				<!-- <uni-list>
					<uni-list-item
						v-for="(item, id) in MyUnreadNotify"
						:key="id"
						:title="item.templateParams.name"
						:note="item.templateParams.what"
						@click="dialogToggle('unread', item.id)"
					>
						<template v-slot:footer>
							<text
								style="color: #007aff; margin-left: 10px; cursor: pointer;"
								@click="dialogToggle('unread', item.id)"
							>
								标为{{ items[current === 0 ? 1 : 0] }}
							</text>
						</template>
					</uni-list-item>
				</uni-list> -->
				<view v-if="unreadLoading" style="text-align:center;padding:10px;">加载中...</view>
				<view v-if="unreadFinished" style="text-align:center;padding:10px;color:#888;">没有更多了</view>
			</view>
			<scroll-view 
			style="height: 80vh"
			scroll-y="true"
			@scrolltolower="onScrollToLower"
			v-show="current === 1">
					<uni-group v-for="(item, id) in MyReadedNotify"  :key="id"
					:title="item.templateParams.name" mode="card">
					<view >
						{{ item.templateParams.what }}
					</view>
				</uni-group>
				<!-- <uni-list>
					<uni-list-item
						v-for="(item, id) in MyReadedNotify"
						:key="id"
						:title="item.templateParams.name"
						:note="item.templateParams.what"
					>
						 <template v-slot:footer>
							<text
								style="color: #007aff; margin-left: 10px; cursor: pointer;"
								@click="dialogToggle('read', item.id)"
							>
								标为{{ items[current === 0 ? 1 : 0] }}
							</text>
						</template> 
					</uni-list-item>
				</uni-list> -->
				<view v-if="readLoading" style="text-align:center;padding:10px;">加载中...</view>
				<view v-if="readFinished" style="text-align:center;padding:10px;color:#888;">没有更多了</view>
			</scroll-view>
		</view>
		<!--<view style="margin: 20px 0; text-align: center;">
			<button type="primary" @click="startScan">teststart</button>
			<button type="primary" @click="stopScan">testshutdown</button>
		</view> -->
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog
				:type="msgType"
				cancelText="关闭"
				:confirmText="msgType === 'read' ? '未读' : '已读'"
				title=""
				:content="`是否将消息标记为${msgType === 'read' ? '未读' : '已读'}`"
				@confirm="dialogConfirm"
				@close="dialogClose"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
import {
	updateNotifyMessageRead,
	unReadNotifyMessage,
	getMyUnreadNotifyMessagePage,
	getMyReadedNotifyMessagePage
} from "@/api/notify/my";
export default {
	data() {
		return {
			MyNotify: null,
			items: ['未读', '已读'],
			current: 0,
			type: 'center',
			messageText: '这是一条成功提示',
			value: '',
			eda50ScanModule: null,
			barcodeModel: null,
			msgType: null,
			id: null,
			// 无限滚动相关
			pageSize: 10,
			// 未读
			MyUnreadNotify: [],
			unreadPage: 1,
			unreadLoading: false,
			unreadFinished: false,
			// 已读
			MyReadedNotify: [],
			readPage: 1,
			readLoading: false,
			readFinished: false

		};
	},
	computed: {
		hasNoNotify() {
			return this.MyUnreadNotify.length === 0 && this.MyReadedNotify.length === 0;
		}
	},
	onLoad() {
		this.eda50ScanModule = uni.requireNativePlugin('wm-Eda50QrcodeScan');
		this.eda50ScanModule.initDevice((result) => {
			uni.showModal({
				title: "扫描结果",
				content: result,
				showCancel: false
			});
			uni.showToast({
				title: "扫描结果: " + result,
				duration: 20
			});
		});
		//获取module
		  this.barcodeModel = uni.requireNativePlugin("iData-BarcodePlugin-BarcodeModule")
		//接口initScan(UniJSCallback callback)
		//默认设置扫描输出模式为广播
		//使用示例
		console.log("onload"+this.barcodeModel)
		this.barcodeModel.initScan((ret) => {
			modal.toast({
				message: ret,
				duration: 1.5
			});
		});
		//页面监听event事件,建议在页面onLoad方法里调用
		var globalEvent = uni.requireNativePlugin('globalEvent');
		console.log("onload"+barcodeModel)
		globalEvent.addEventListener('iDataBarcodeEvent', function(e) {
			modal.toast({
			//条码结果示例：{"barcode","条码数据"}
			message: "收到条码：" + JSON.stringify(e),
				duration: 1.5
			});
		});
	},
	onunload() {
		//建议在页面onUnload方法里调用
		//接口closeScan(UniJSCallback callback)
		//默认设置扫描输出模式为焦点
		this.barcodeModel.closeScan((ret) => {
			modal.toast({
				message: ret,
				duration: 1.5
			});
		});

	},
	mounted() {
		this.fetchNotifyList(true);
	},
	methods: {
		// 获取未读消息（追加模式）
		async fetchUnreadNotify(reset = false) {
			if (this.unreadLoading || this.unreadFinished) return;
			this.unreadLoading = true;
			const page = reset ? 1 : this.unreadPage;
			const res = await getMyUnreadNotifyMessagePage({ pageNo: page, pageSize: this.pageSize });
			const list = res.data.list || [];
			if (reset) {
				this.MyUnreadNotify = list;
			} else {
				this.MyUnreadNotify = this.MyUnreadNotify.concat(list);
			}
			if (list.length < this.pageSize) {
				this.unreadFinished = true;
			} else {
				this.unreadPage = page + 1;
			}
			this.unreadLoading = false;
		},
		// 获取已读消息（追加模式）
		async fetchReadedNotify(reset = false) {
			if (this.readLoading || this.readFinished) return;
			this.readLoading = true;
			const page = reset ? 1 : this.readPage;
			const res = await getMyReadedNotifyMessagePage({ pageNo: page, pageSize: this.pageSize });
			const list = res.data.list || [];
			if (reset) {
				this.MyReadedNotify = list;
			} else {
				this.MyReadedNotify = this.MyReadedNotify.concat(list);
			}
			if (list.length < this.pageSize) {
				this.readFinished = true;
			} else {
				this.readPage = page + 1;
			}
			console.log(this.readPage)
			console.log(page)
			console.log(reset)
			this.readLoading = false;
		},
		// 根据当前tab获取对应数据
		fetchNotifyList(reset = false) {
			
				this.fetchUnreadNotify(reset);
			
				this.fetchReadedNotify(reset);
			
		},
		// tab切换
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
				// 切换tab时重置
				if (this.current === 0) {
					this.unreadPage = 1;
					this.unreadFinished = false;
					this.fetchUnreadNotify(true);
				} else {
					this.readPage = 1;
					this.readFinished = false;
					this.fetchReadedNotify(true);
				}
			}
		},
		// 下拉到底部加载更多
		onScrollToLower() {
			console.log("onscroll"+this.current)
			if (this.current === 0) {
				this.fetchUnreadNotify();
			} else {
				this.fetchReadedNotify();
			}
		},
		dialogToggle(type, id) {
			this.msgType = type;
			this.id = id;
			this.$refs.alertDialog.open();
		},
		dialogConfirm() {
			const id = this.id;
			if (this.msgType === 'read') {
				unReadNotifyMessage([id]).then(() => {
					this.messageText = `标记为未读成功`;
					this.unreadPage = 1;
					this.unreadFinished = false;
					this.readPage = 1;
					this.readFinished = false;
					this.fetchNotifyList(true);
				});
			} else if (this.msgType === 'unread') {
				updateNotifyMessageRead([id]).then(() => {
					this.messageText = `标记为已读成功`;
					this.unreadPage = 1;
					this.unreadFinished = false;
					this.readPage = 1;
					this.readFinished = false;
					this.fetchNotifyList(true);
				});
			}
			this.$refs.message.open();
		},
		dialogClose() {
			// 关闭弹窗
		},
		// 扫码相关
		// startScan() {
		// 	if (!this.eda50ScanModule) return;
		// 	this.eda50ScanModule.initDevice((result) => {
		// 		uni.showModal({
		// 			title: "扫描结果",
		// 			content: result,
		// 			showCancel: false
		// 		});
		// 		uni.showToast({
		// 			title: "扫描结果: " + result,
		// 			duration: 20
		// 		});
		// 	});
		// 	setTimeout(() => {
		// 		this.eda50ScanModule.startScan();
		// 	}, 300);
		// },
		// stopScan() {
		// 	if (this.eda50ScanModule) {
		// 		this.eda50ScanModule.releaseDevice();
		// 	}
		// }
		startScan() {
						//接口initScan(UniJSCallback callback)
			//默认设置扫描输出模式为广播
			//使用示例
			console.log(this.barcodeModel)
			this.barcodeModel.initScan((ret) => {
				modal.toast({
					message: ret,
					duration: 1.5
				});
			});
						//接口scanStart(UniJSCallback callback)
			
			setTimeout(() => {
				this.barcodeModel.scanStart((ret) => {
				modal.toast({
					message: ret,
					duration: 1.5
				});
			});
			}, 300);
		},
		stopScan() {
						//接口scanStop(UniJSCallback callback)
			this.barcodeModel.scanStop((ret) => {
				modal.toast({
					message: ret,
					duration: 1.5
				});
			});
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>